<template>
    <div class="wrapper">
        <v-header></v-header>
        <v-sidebar></v-sidebar>
        <div class="sideList">
            <side-center :list="list"></side-center>
        </div>
        <div class="content-box" :class="{'content-collapse':collapse}">
        <div class="content">
            <v-tags></v-tags>
            <transition name="move" mode="out-in">
                <keep-alive :include="tagsList">
                    <router-view></router-view>
                </keep-alive>
            </transition>
        </div>
        </div>
    </div>

</template>
           
<script>
import bus from "./bus";
import VHeader from "@/views/Header.vue";
import VMain from "@/views/Main.vue";
import VSider from "@/views/Sider.vue";
import VMenu from "@/views/Menu.vue";
import VSidebar from "@/views/VSidebar.vue";
import SideCenter from "@/views/SideCenter.vue";
import VTags from "@/views/tags.vue";
export default {
    data() {
        return {
            tagsList: [],
            collapse: false,
            list:[
                // {
                // title:"系统首页",
                // sliderBarList:[
                //     {
                //     name:"系统设置",
                //     path:"/systemIndex/setting"
                //     },
                // ]
                // }
            ]
        };
    },
    watch: {
        $route(to, from) {
            if (to.fullPath.match("/zzgl")) {
                this.list = [
                    {
                        title: "组织管理",
                        sliderBarList: [
                            {
                                name: "党组织管理",
                                path: "Dzzgl"
                            }
                        ]
                    },
                ];
            }
        }
    },
    created() {
        bus.$on("collapse", msg => {
            this.collapse = msg;
        });

        // 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。
        bus.$on("tags", msg => {
            let arr = [];
            for (let i = 0, len = msg.length; i < len; i++) {
                msg[i].name && arr.push(msg[i].name);
            }
            this.tagsList = arr;
        });
    },
    components: {
        VHeader,
        VSider,
        VMain,
        VMenu,
        VSidebar,
        SideCenter,
        VTags
    },
    mounted() {}
};
</script>
<style lang="scss">
.wrapper{
    .sideList {
        width: 242px;
        height: 100%;
        background: #921500;
        position: absolute;
        left: 78px;
        top: 0;
        z-index: 666;
    }   
    .content {
        width: 100%;
        // height: calc(100%-60px);
    }
}
</style>